<template>
  <div class="box">
    <button @click="cut">-</button>
    <span :title="massage">{{num}}</span>
    <button @click="add">+</button>
  </div>
</template>

<script>
  let i = 1;
  export default{
    data(){
      return {
        massage : "商品数量",
        num : 1
      }
    },
    methods : {
      add(){
        i++;
        this.num = i
      },
      cut(){
        i--;
        if(i<0){
          i = 0
        }
        this.num = i
      }
    }
  }
</script>

<style>
  *{
    padding: 0;
    margin: 0;
  }
  .box{
    /* width: 150px; */
    height: 60px;
    /* border: 1px solid #000; */
    margin: 100px auto;
    text-align: center;
    overflow: hidden;
  }
  button{
    font-size: 30px;
    width: 60px;
    height: 60px;
    background-color: #fff;
    border: none;
    outline: none;
  }
  button:nth-child(2){
    float: right;
  }
  span{
    font-size: 30px;
  }
</style>
